<template>
  <div class="app-container">
    <div class="header">
      <el-input v-model="inputValue" style="width: 200px;margin-right: 20px" placeholder="发布人/手机号"></el-input>
      <!--      发布时间-->
      <span style="font-weight: bold;margin-right: 20px">发布时间</span>
      <el-date-picker
        style="margin-right: 20px"
        v-model="value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button style="margin-right: 20px" type="primary" @click="handleQuery">搜索</el-button>
      <!--      排列方式-->
      <span style="margin-right: 20px;font-weight: bold">排列方式</span>
      <el-select v-model="selcetValue" placeholder="请选择" @change="orderChange">
        <el-option
          v-for="item in orderData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="headerItem">
      <!--      删除按钮-->
      <el-button type="danger" @click="handleDelete">删除</el-button>
      <el-input v-model="topicValue" style="width: 155px;margin: 0 40px" placeholder="话题" @change="searchChange"></el-input>
      <el-input v-model="contentValue" style="width: 155px" placeholder="内容" @change="searchChange"></el-input>
    </div>
<!--    表格区域-->
    <el-table
      :header-cell-style="{textAlign: 'center',fontSize:'18px',fontWeight:'bold',borderBottom: '1px #ccc solid',background:'#fff'}"
      :cell-style="{ textAlign: 'center' }"
      ref="multipleTable"
      :data="CompassDiaryList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="compassNormalUser.nickName"
        label="发布人">

      </el-table-column>
      <el-table-column
        prop="createTime"
        label="发布时间">
      </el-table-column>
      <el-table-column
        prop="diaryDesc"
        label="发布内容"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="diaryType"
        label="话题"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="weights"
        label="权重值"
        show-overflow-tooltip>
       <template slot-scope="scope">
         <el-input v-model="scope.row.weights" @change="updateWeights(scope.row)" value="weightValue"></el-input>
       </template>
      </el-table-column>
      <el-table-column
        prop="likeNum"
        label="点赞数"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="commentNum"
        label="评论数"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="操作"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text" style="color: red" @click="handleDelete(scope.row)"  v-hasPermi="['system:CompassDiary:remove']">删除</el-button>
          <el-button type="text" style="color: #178FFE" @click="toDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改家长圈日记管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="评论数" prop="commentNum">
          <el-input v-model="form.commentNum" placeholder="请输入评论数"/>
        </el-form-item>
        <el-form-item label="日记话题" prop="diaryType">
          <el-input v-model="form.diaryType" placeholder="请输入日记话题"/>
        </el-form-item>
        <el-form-item label="有效状态-1 删除 1、有效" prop="disableFlag">
          <el-input v-model="form.disableFlag" placeholder="请输入有效状态-1 删除 1、有效"/>
        </el-form-item>
        <el-form-item label="点赞数" prop="likeNum">
          <el-input v-model="form.likeNum" placeholder="请输入点赞数"/>
        </el-form-item>
        <el-form-item label="发布人ID" prop="uId">
          <el-input v-model="form.uId" placeholder="请输入发布人ID"/>
        </el-form-item>
        <el-form-item label="权重值" prop="weights">
          <el-input v-model="form.weights" placeholder="请输入权重值"/>
        </el-form-item>
        <el-form-item label="日记内容" prop="diaryDesc">
          <el-input v-model="form.diaryDesc" placeholder="请输入日记内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCompassDiary,
  getCompassDiary,
  delCompassDiary,
  addCompassDiary,
  updateCompassDiary,
  exportCompassDiary, updateWeights
} from '@/api/system/CompassDiary'

export default {
  name: 'CompassDiary',
  data() {
    return {
      //查询参数
      //权重值
      weightValue:"",
      //下拉框内容
      value1:"",
      //内容
      contentValue:"",
      //话题输入框
      topicValue:"",
      tableData:[],
      selcetValue: '最新',
      //排序方式
      orderData: [
        {
          value:1,
          label: '最新'
        },
        {
          value: 2,
          label: "推荐"
        }
      ],
      //输入框数据
      inputValue: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 家长圈日记管理表格数据
      CompassDiaryList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime:"",
        endTime:"",
        diaryDesc:"",
        orderType:1,
        diaryType:"",
        userNameOrPhone:""
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      userInfo:{}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //组装查询参数
    getQueryParams() {
      if (this.value1!=null&&this.value1.length>0){
        //给查询条件开始时间赋值
        this.queryParams.startTime=this.value1[0]
        //给查询条件结束时间赋值
        this.queryParams.endTime=this.value1[1]
      }else{
        //给查询条件开始时间赋值
        this.queryParams.startTime=""
        //给查询条件结束时间赋值
        this.queryParams.endTime=""
        this.queryParams.userNameOrPhone=""
      }
      //给查询条件输入框赋值
      this.queryParams.userNameOrPhone=this.inputValue
      //给查询条件状态赋值
      this.queryParams.orderType=this.selcetValue
      this.queryParams.diaryType=this.topicValue
      this.queryParams.diaryDesc=this.contentValue
      if(this.queryParams.orderType==="最新"){
        //当查询条件为全部的时候，查询状态赋值为空
        this.queryParams.orderType=1
      }else{
        this.getQueryParams.orderType=2
      }
    },
    //输入框搜索功能
    searchChange(){
      this.getQueryParams()
      listCompassDiary(this.queryParams).then(res=>{
        this.CompassDiaryList=res.rows
      })
    },
    //获取下拉框选中值
    orderChange(){
      this.getQueryParams()
      listCompassDiary(this.queryParams).then(res=>{
        this.CompassDiaryList=res.rows
      })
    },
    //修改权重
    updateWeights(row){
      console.log(row)
      const id = row.id || this.ids
      updateWeights(
        id, row.weights
      ).then(res=>{
        this.$message.success("修改成功")
        this.getList()
      })
    },
    //跳转到详情页
    toDetail(row){
      this.$router.push({
        name:'diaryDetail',
        query:{
          id:row.id
        }
      })
    },
    /** 查询家长圈日记管理列表 */
    getList() {
      this.getQueryParams()
      listCompassDiary(this.queryParams).then(response => {
        this.CompassDiaryList = response.rows
        this.userInfo=response.rows.compassNormalUser
        this.total = response.total
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        commentNum: null,
        diaryType: null,
        disableFlag: null,
        likeNum: null,
        uId: null,
        weights: null,
        diaryDesc: null,
        createTime: null,
        updateTime: null
      }
      this.resetForm('form')
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getQueryParams()
      listCompassDiary(this.queryParams).then(res=>{
        this.total=res.total
        this.CompassDiaryList = res.rows
      })


    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加家长圈日记管理'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getCompassDiary(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改家长圈日记管理'
      })
    },
    //跳转到个人详情页
    toUserInfo(){
      // const id=row.id
      const uid=this.userId
      console.log(uid)
      this.$router.push({
        name:"UserDetail",
        query:{
          id:uid
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCompassDiary(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              }
            })
          } else {
            addCompassDiary(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              }
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$confirm('是否确认删除家长圈日记管理编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delCompassDiary(ids)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      }).catch(function() {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有家长圈日记管理数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportCompassDiary(queryParams)
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  margin: 20px 0;
  font-size: 14px;

  .select {
    margin: 0 20px;

    span {
      font-size: 14px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
}
.headerItem{
  margin-bottom: 40px;
}
</style>
